import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class VerifyEmailPage extends StatefulWidget {

  const VerifyEmailPage({super.key});
  @override
  State<VerifyEmailPage> createState() => _VerifyEmailPageState();
}

class _VerifyEmailPageState extends State<VerifyEmailPage> {
  

  
  @override
  Widget build(BuildContext context) {

     var title =  Container(
      color: Colors.transparent, // Set the color to transparent
      padding: const EdgeInsets.fromLTRB(16, 100, 16, 16), // Add top padding of 100
      child: const Text(
        'Verify your Email',
        textAlign: TextAlign.center,
        style: TextStyle(
          color: Colors.black, // Set the text color to black
          fontSize: 32,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
    
    var flower = Container(
      padding: const EdgeInsets.all(8),
      child: const Icon(Icons.email, size: 100, color: Colors.blue),
    );

    var code = Container(
       padding: const EdgeInsets.all(8),
       child: Row(
             mainAxisAlignment: MainAxisAlignment.center,
             children:List.generate(6, (index) {
                return Container(
                  width: 40 ,
                  margin: const EdgeInsets.fromLTRB(4, 0, 4, 0),
                  child: TextField(
                    textAlign: TextAlign.center,
                    textAlignVertical: TextAlignVertical.center,
                    maxLength: 1, // 设置最大长度为1
                    keyboardType: TextInputType.number, // 设置键盘为数字
                    inputFormatters: [
                      FilteringTextInputFormatter.allow(RegExp(r'[0-9]')), // 设置只允许输入数字
                    ],
                    decoration: const InputDecoration(
                      counterText: '', // 隐藏输入的数字
                      contentPadding: EdgeInsets.all(5), // 设置输入框的内边距
                      border: OutlineInputBorder(), // 设置输入框的边框
                    ),
                    textInputAction: TextInputAction.next, // 设置为下一个
                    onChanged: (value) {
                       debugPrint('文本框的值：$value');
                      // 在这里处理输入的内容
                       if (value.length == 1 && index < 5) {
                          FocusScope.of(context).nextFocus(); // 切换到下一个文本框
                       }else if(value.isEmpty && index > 0){
                          FocusScope.of(context).previousFocus();
                       } 
                    },
                  ) ,
                );
             }),
       ),
    );

   

    return Scaffold(
       body:Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                 title,
                 flower,
                 code,
              ],
            ),
          ),
        ],
      )
    );
  }
}